<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt' %> 
    <style>
    	table.table-hover tr{
    	cursor:pointer;
    	}
    
    </style>
<div class="row" style="margin:100px 0px;">
	
	<div class="col-xs-5" >
		<button class="btn btn-sm btn-info" onclick="addMainType1()"><span class="glyphicon glyphicon-plus"></span>增加角色</button>
		<br>
		<br>
		<table class="table table-hover" >
		  <a href="#" class="list-group-item active">
		    角色列表
		  </a>
		  <tbody id="mainTypeArea1" style="border-width:1px;border-style:solid;border-color:#337AB7;">
		  <tr>
		        <td>名称</td> 
		        <td>描述</td> 
		        <td>编辑</td> 
		        <td>删除</td> 
		     </tr>
		  <c:forEach items="${roles}" var="role" varStatus="st"  >
    		<tr class='trMainId1'>
    			<input type="hidden" value="${role.id}">
		        <td>${role.name}</td> 
		        <td>${role.desc_}</td> 
		        <td><a><span class="glyphicon glyphicon-edit editMainType1"></span></a></td> 
		        <td><a><span class="glyphicon glyphicon-trash deleteMainType1"></span></a></td> 
		     </tr>
		</c:forEach>
	  </tbody>
	</table>
	</div>
	<div class="col-xs-7">
		<form id="formPermission">
		<table class="table table-hover" >
		<a href="#" class="list-group-item active">
		    权限列表
		  </a>
			<tbody id="mainTypeArea1" style="border-width:1px;border-style:solid;border-color:#337AB7;">
				<tr>
					<td></td>
					<td>名称</td>
					<td>描述</td>
					<td>链接</td>
				</tr>	
				
				<c:forEach items="${permissions}" var="permission">
					<tr>
						<td><input type="checkbox" name="permissionId"  value="${permission.id}"></td>
						<td>${permission.name}</td>
						<td>${permission.desc_}</td>
						<td>${permission.url}</td>
					</tr>	
				</c:forEach>
			</tbody>
		  </table>
		  </form>
		  <button class="btn btn-primary" onclick="updatePermission()">更新</button>
	</div>
	
</div>
<script>
//主分类下的删除
$("body").on("click",".deleteMainType1",function(){
	var isConfirm = confirm("确认删除？这将会删除该角色及其对应的权限信息");
	if(isConfirm){
		var $tr = $(this).parent().parent().parent();
		var id = $($tr).children().eq(0).val();
		$.ajax({
			url:"role_delete",
			type:"post",
			data:{id:id},
			dataType:"json",
			success:function(data){
				$($tr).remove();
			},
			error:function(data){
			}
		});
	}
});

/**
 * 主分类增加按钮
 */
//点击增加按钮的操作
function addMainType1(){
	var htmlStr = "<tr class='trMainId1'>";
	htmlStr+="<input type='hidden'>";
	htmlStr+=" <td><input class='form-control'  type='text'></td> ";
	htmlStr+=" <td><input class='form-control'  type='text'></td> ";
	htmlStr+="<td><button class='btn btn-sm btn-success subAdd1'><span class='glyphicon glyphicon-ok'></span></button></td>";
	htmlStr+=" <td><button class='btn btn-sm btn-danger delAdd1' ><span class='glyphicon glyphicon-remove'></span></button></td>";
	htmlStr+="</tr>";
	$("#mainTypeArea1").append(htmlStr);
}

/**
 * 主分类增加部分
 */
//增加时点击删除按钮，删除此元素
$("body").on("click",".delAdd1",function(){
	$(this).parent().parent().remove();
});
//增加时点击增加按钮，传输数据到后台
$("body").on("click",".subAdd1",function(){
	var name = $(this).parent().siblings().eq(1).children().eq(0).val();
	var desc_ = $(this).parent().siblings().eq(2).children().eq(0).val();
	
	var addmainTypeArea1 = $(this).parent().parent();
	$.ajax({
		url:"role_add",
		type:"post",
		data:{name:name,desc_:desc_},
		dataType:"json",
		success:function(data){
			var role = data;
			var htmlStr = "<input type='hidden' value='"+role.id+"'>";
			htmlStr+="<td>"+role.name+"</td>";
			htmlStr+="<td>"+role.desc_+"</td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-edit editMainType1'></span></a></td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteMainType1'></span></a></td>";
			$(addmainTypeArea1).html(htmlStr);
		}
	});
});

/**
 * 主分类下编辑操作
 */
 
 var id1;
 var name1;
 var desc_1;
 
//编辑时点击编辑按钮，切换框
$("body").on("click",".editMainType1",function(){
	var $tr = $(this).parent().parent().parent();
	 id1 = $($tr).children().eq(0).val();
	 name1 = $($tr).children().eq(1).text();
	 desc_1 = $($tr).children().eq(2).text();
	var htmlStr = "<input type='hidden' value='"+id1+"'>";
	htmlStr+=" <td><input class='form-control'  type='text' value='"+name1+"'></td> ";
	htmlStr+=" <td><input class='form-control'  type='text' value='"+desc_1+"'></td> ";
	htmlStr+="<td><button class='btn btn-sm btn-success subUpdate1'><span class='glyphicon glyphicon-ok'></span></button></td>";
	htmlStr+=" <td><button class='btn btn-sm btn-danger delUpdate1'><span class='glyphicon glyphicon-remove'></span></button></td></tr>";
	$($tr).html(htmlStr);
});


//点击勾号的更新操作
$("body").on("click",".subUpdate1",function(){
	var id = $(this).parent().siblings().eq(0).val();
	var name = $(this).parent().siblings().eq(1).children().eq(0).val();
	var desc_ = $(this).parent().siblings().eq(2).children().eq(0).val();
	var updatemainTypeArea1 = $(this).parent().parent();
	$.ajax({
		url:"role_update",
		type:"post",
		data:{id:id,name:name,desc_:desc_},
		dataType:"json",
		success:function(data){
			var role = data;
			var htmlStr = "<input type='hidden' value='"+role.id+"'>";
			htmlStr+="<td>"+role.name+"</td>";
			htmlStr+="<td>"+role.desc_+"</td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-edit editMainType1'></span></a></td>";
			htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteMainType1'></span></a></td>";
			$(updatemainTypeArea1).html(htmlStr);
		}
	});
});

//点击X号时退回原来状态
$("body").on("click",".delUpdate1",function(){
	var updatemainTypeArea1 = $(this).parent().parent();
	var htmlStr = "<input type='hidden' value='"+id1+"'>";
	htmlStr+="<td>"+name1+"</td>";
	htmlStr+="<td>"+desc_1+"</td>";
	htmlStr+="<td><a><span class='glyphicon glyphicon-edit editMainType1'></span></a></td>";
	htmlStr+="<td><a><span class='glyphicon glyphicon-trash deleteMainType1'></span></a></td>";
	$(updatemainTypeArea1).html(htmlStr);
});
</script>
<script>
var roleId = -1;
//角色点击时查询角色对应的权限信息
$("body").on("click",".trMainId1",function(){
	console.log("触发点击");
	initRoleSelected();
	$(this).addClass("active");
	initCheck();
	roleId = $(this).children().eq(0).val();
	$.ajax({
		url:"roleper_getPermission_byRole",
		data:{id:roleId},
		success:function(data){
			var permissions = data;
			for(var i=0;i<permissions.length;i++){
				var idStr = permissions[i].id+"";
				addChecked(idStr);
			}
		}
	});
});
	
	//当点击更新时，获取所有的权限id，（form序列化）更新完毕之后显示更新完毕
	function updatePermission(){
		var longid = $("#formPermission").serialize();
		var dataStr = "roleId="+roleId+"&"+longid;
		if(roleId==-1){
			alert("请选择角色!");
		}else{
			$.ajax({
				url:"roleper_updateRolePermission",
				type:"post",
				data:dataStr,
				success:function(data){
					alert("更新成功!")
				}
			});
		}
		
	}
	//根据输入的id，判断属于哪一个permission，并加上对应的选中
	function addChecked(idStr){
		$("input[name='permissionId']").each(function(){
			if($(this).val()==idStr){
				$(this).prop("checked",true);
			}
		});
	}
	
	//清空复选框的选中状态
	function initCheck(){
		$("input[name='permissionId']").each(function(){
			$(this).prop("checked",false);
		});
	}
	
	//清空角色选择栏的选中状态
	function initRoleSelected(){
		$(".trMainId1").each(function(){
			$(this).removeClass("active");
		});
	}
	

</script>